<template>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="apply-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="流程名称：" prop="title">
        <el-input v-model="ruleForm.title" />
      </el-form-item>
      <el-form-item label="报销类型：" prop="type">
        <el-select v-model="ruleForm.type" placeholder="选择请假类型">
          <el-option label="交通费" value="1" />
          <el-option label="餐饮费" value="2" />
          <el-option label="住宿费" value="3" />
          <el-option label="办公用品费" value="4" />
          <el-option label="培训费" value="5" />
          <el-option label="通讯费" value="6" />
          <el-option label="医疗费" value="7" />
        </el-select>
      </el-form-item>

      <el-form-item label="开始时间：" class="report_style">
          <el-form-item class="report_input time">
            <el-date-picker
              v-model="ruleForm.startTime"
              type="datetime"
              placeholder="开始时间"
              popper-class="pictime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width:300px;"
            />
          </el-form-item>
        </el-form-item>
        <el-form-item  label="结束时间：" class="report_style">
          <el-form-item class="report_input time">
            <el-date-picker
            v-model="ruleForm.endTime"
              type="datetime"
              placeholder="结束时间"
              popper-class="pictime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width:300px;"
            />
          </el-form-item>
        </el-form-item>

   
      <el-form-item label="报销原因：" prop="detail">
        <el-input v-model="ruleForm.detail" type="textarea" />
      </el-form-item>
      <el-form-item label="发票附件：">
        <input ref="uploadInputRef" type="file" name="file" @change="handleImport">
        <el-button type="primary" :loading="state.importLoading" @click="operImport()">上传</el-button>
      </el-form-item>
           
      <el-form-item label="发票清单：" prop="filesList">
          <div>
            <ul class="details_ul header_ul">
              <li>
               <span class="col0">NO.</span>
               <span class="col1">发票类型</span>
               <span class="col2">金额</span>
              </li>
            </ul>
            <ul class="details_ul">
              <li v-for="one in state.detailList">
               <span class="col0">{{one.id}}</span>
               <span class="col1">{{one.name}}</span>
               <span class="col2">{{one.count}} </span>
              </li>
            </ul>
          </div>
        </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          保存
        </el-button> 
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
  import {saveApply,filesUpload} from '@/api/apply'
  
  interface RuleForm {
    //标题
    title: string
    //流程类型
    type: number
    count: number
    startTime: string
    endTime: string
    detail: string,
    start:string,
    end:string
  }
interface detailInfo{
  id:number,
  name:string,
  uploadfile:file,
  countValue:number,
  type:number
}
 
const uploadInputRef=ref<any>(null)
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const state= reactive({
  importLoading:false,
  detailList:[{
    id:1,name:'2222',count:20.0,
    type:1
  },
{
  id:2,name:'4444',count:50.0,
  type:2
}]
})
const ruleForm = reactive({
    title: 'Hello',
    type: '1',
    // count: 3,
    startTime: '',
    endTime: '',
    detail: '',
    // start:'',
    // end:''
  })
  
  const rules = reactive<FormRules<RuleForm>>({
    title: [
      { required: true, message: 'Please input Activity name', trigger: 'blur' },
      { min: 3, max: 25, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    type: [
      {
        required: true,
        message: '请选择类型',
        trigger: 'change',
      },
    ],
    count: [
      {
        required: true,
        message: 'Please select Activity count',
        trigger: 'change',
      },
    ],
    startTime: [
      {
        type: 'date',
        required: true,
        message: 'Please pick a date',
        trigger: 'change',
      },
    ],
    endTime: [
      {
        type: 'date',
        required: true,
        message: 'Please pick a time',
        trigger: 'change',
      },
    ],
    detail: [
      { required: true, message: 'Please input activity form', trigger: 'blur' },
    ],
  })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        saveApply(ruleForm).then(res => {
            console.log(res,"~~~~~~~~")
        })
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }))
  const operImport = () => {
    console.log(uploadInputRef)
    uploadInputRef.value.click()
        state.importErrorList = []
      }
      const handleImport = (e) => {
        const files = e.target.files
        const rawFile = files[0] // only use files[0]
        // if (!rawFile) return
        upload(rawFile, e)
      }
      const upload = (rawFile, event) => {
        let inputDom = event.target
        // const fileObj = rawFile
        console.log(rawFile)
        const formData = new FormData()
        formData.append('file', rawFile)
        let uploadFile = ref('uploadInputRef')
        console.log(uploadFile,"~~~~~~~~~~~uploadFile",formData.get('file'))
        state.importLoading = true
        //导入确认
        filesUpload(formData)
          .then((response) => {
            if (response.code === 1) {
              // showImportRes(response)
              state.importLoading = false
              // //刷新页面数据
              // fetchData()
            }
            // state.handleAccoutFilter()
          })
          .catch((err) => {
            console.log(err)
            state.importErrorList = []
          })
          .finally(() => {
            state.importLoading = false
            // uploadFile.value = ''
            // inputDom.value = ''
          })
            
      }
  </script>
 <style lang="scss">
.apply-ruleForm {
    width: 50%;
    margin: auto;
    margin-top: 3%;
    .el-input.el-input--default {
    width: 300px;
}
.el-textarea.el-input--default {
    width: 300px;
}

ul.details_ul {
    width: 300px;
    text-align: left;
    margin: 0;
    padding: 0;
}

ul.details_ul li>span {
    display: inline-block;
    width: 20%;
}

li {
    list-style: none;
}

ul.details_ul li>span.col1 {
    width: 50%;
}

ul.details_ul.header_ul {
    background: #dcdcdc;
}

ul.details_ul li>span.col0 {
    padding-left: 20px;
}

ul.details_ul>li {
    border-bottom: 1px solid #dcdcdc;
}
}
</style>
  